import React, { useState, useEffect, useReducer } from 'react';
import styles from './index.less';
import { Layout, Menu } from 'antd';
import { UnorderedListOutlined } from '@ant-design/icons';
const { Sider } = Layout;
const { SubMenu } = Menu;

export default (props: any) => {
  const { menuKey, menuOpenKey } = sessionStorage;
  const toPath = (item: any) => {
    props.parents.history.push(item.path);
  };
  const { menu } = sessionStorage.info ? JSON.parse(sessionStorage.info) : [];
  const menuList = (data: any) => {
    return data.map((item: any) => {
      if (item.childMenu && item.childMenu.length) {
        //如果有子节点，继续递归调用，直到没有子节点
        return (
          <SubMenu
            icon={<UnorderedListOutlined />}
            title={item.title}
            key={item.title}
          >
            {menuList(item.childMenu)}
          </SubMenu>
        );
      }
      //没有子节点就返回当前的父节点
      return (
        <Menu.Item
          onClick={() => {
            toPath(item);
          }}
          key={item.title}
        >
          {item.title}
        </Menu.Item>
      );
    });
  };
  const menuSel = (e: any) => {
    sessionStorage.menuKey = e.selectedKeys[0];
  };
  const menuOpen = (e: any) => {
    sessionStorage.menuOpenKey = e.join(',');
  };
  return (
    <Sider className="site-layout-background me" width={220}>
      {menuKey ? (
        <Menu
          mode="inline"
          style={{ height: '100%', paddingTop: 10 }}
          defaultSelectedKeys={[menuKey]}
          defaultOpenKeys={menuOpenKey.split(',')}
          onSelect={menuSel}
          onOpenChange={menuOpen}
        >
          {menuList(menu)}
        </Menu>
      ) : (
        <div></div>
      )}
    </Sider>
  );
};
